<template>
<view id="all">
	<view class="top">
		<view class="swiper-w">
			<swiper class="swiper" autoplay="true" interval="2000" duration="1500" circular="true">
					<swiper-item>
						<image src="../../static/imgs/banner%20(3).png"></image>
					</swiper-item>
					<swiper-item>
						<image src="../../static/imgs/banner%20(3).png"></image>
					</swiper-item>
					<swiper-item>
						<image src="../../static/imgs/banner%20(3).png"></image>
					</swiper-item>
			</swiper>
		</view>
		<!-- 搜索框 -->
		<view class="search">
			<image src="../../static/imgs/search.png"></image>
			<input type="text" placeholder-style="color:#fff" placeholder="超级秒杀!轮胎99元起···"/>
		</view>
	</view>
	<!-- 保养列表 -->
	<view style="margin-bottom:450rpx"><maintain /></view>
	<view class="indexAddBtn">
		<image src="../../static/imgs/jia.png"></image>
		<input type="button" value="点击添加车辆" class="indexBtn"/>
	</view>
	<view class="advertising"><image src="../../static/imgs/guanggao.png"></image></view>
	<!-- 天天秒杀 -->
	<view><seckill></seckill></view>
	<view><SpellDeals></SpellDeals></view>
</view><!-- all -->
</template>

<script>
	import maintain from "../../components/maintain.vue"
	import seckill from "../../components/seckill.vue"
	import SpellDeals from "../../components/SpellDeals.vue"
	export default {
		components:{
			maintain,
			seckill,
			SpellDeals
		},
		data() {
			return {
				
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
.top {display:flex;justify-content: center;overflow: hidden}
/* 搜索框 */
.search{width:694rpx;margin-top:16rpx;height:70rpx;background:rgba(255,255,255,0.4);position: absolute;top:7rpx;display:flex;justify-content: center;align-items: center;opacity:0.36;border-radius:29px;text-size:10rpx;text-weight:blod;}
.search image{width:34rpx;height:36rpx}
.search input{margin-left:10rpx}
/* 轮播图 */
.swiper-w{width: 100%;height:400rpx;position:relative}
.swiper{height:400rpx ;}
.swiper swiper-item image{width:100%;height: 400rpx;}
.indexAddBtn{position:relative}
.indexAddBtn image{position:absolute;top:35rpx;left:260rpx;width:20rpx;height:20rpx}
.indexBtn{height:92rpx;width:95%;margin:0 auto 10rpx;text-align:center;color:#fff;background:rgba(222,53,72,1);box-shadow:0px 0px 13px 1px rgba(49,49,49,0.13);border-radius:10rpx;}
.advertising{margin:0 auto;width:95%}
.advertising image{width:100%;height:274rpx}
</style>
